@larkup/workspace-app 0.0.0-stage → 0.2.0

package/src/components/settings/general/storage-indexing-section.tsx

@@ -0,0 +1,394 @@
+'use client';
+
+import { workspaceCapabilities, workspaceUrl, workspaceFetch as fetch } from '../../../host';
+import { useState, useEffect } from 'react';
+import useSWR from 'swr';
+import { Loader2, Save, Database, Clock, Layers } from 'lucide-react';
+import { Button } from '@larkup/workspace-ui/button';
+import { Label } from '@larkup/workspace-ui/label';
+import { cn } from '@larkup/workspace-app/lib/utils';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@larkup/workspace-ui/select';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  CardFooter,
+} from '@larkup/workspace-app/components/ui/card';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@larkup/workspace-app/components/ui/alert-dialog';
+import { toast } from 'sonner';
+import { useProject } from '@larkup/workspace-app/components/projects/project-provider';
+import { ProviderIcon } from '@larkup/workspace-ui/provider-icon';
+import {
+  VECTOR_STORE_LIST,
+  getVectorStore,
+  validateStoreConfig,
+} from '@larkup/vector-stores/registry';
+import { StoreFields } from '@larkup/workspace-app/components/configure/store-fields';
+import type { RagConfig, VectorStoreId, IndexType } from '@larkup/core/types';
+
+const INDEX_TYPES: { value: IndexType; label: string; description: string }[] = [
+  {
+    value: 'hybrid',
+    label: 'Hybrid',
+    description: 'Combines semantic understanding with keyword matching for best results.',
+  },
+  {
+    value: 'semantic',
+    label: 'Semantic',
+    description: 'Uses embeddings to find conceptually similar content.',
+  },
+  {
+    value: 'lexical',
+    label: 'Lexical',
+    description: 'Traditional keyword-based search using BM25 scoring.',
+  },
+];
+
+const fetcher = (url: string) => fetch(url).then((r) => r.json() as Promise<{ config: RagConfig }>);
+
+import { STORE_META } from '@larkup/workspace-app/lib/constants/stores';
+
+export function StorageSection() {
+  const { activeProject } = useProject();
+  const serverId = activeProject?.id;
+
+  const configUrl = serverId
+    ? workspaceUrl(`/api/config?serverId=${encodeURIComponent(serverId)}`)
+    : workspaceUrl('/api/config');
+  const { data, isLoading, mutate } = useSWR(configUrl, fetcher);
+
+  const [form, setForm] = useState<Partial<RagConfig>>({});
+  const [saving, setSaving] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [pendingStore, setPendingStore] = useState<VectorStoreId | null>(null);
+  const [storageChangeOpen, setStorageChangeOpen] = useState(false);
+  const [clearKnowledgeBase, setClearKnowledgeBase] = useState(false);
+
+  const { data: indexData } = useSWR(workspaceUrl('/api/index'), (url: string) =>
+    fetch(url).then((r) => r.json()),
+  );
+  const indexedRun = indexData?.run?.status === 'completed' ? indexData.run : null;
+
+  useEffect(() => {
+    if (data?.config) {
+      setForm(data.config);
+    }
+  }, [data]);
+
+  const dirty = JSON.stringify(form) !== JSON.stringify(data?.config ?? {});
+
+  const clearError = (key: string) => {
+    if (errors[key]) {
+      setErrors((prev) => {
+        const next = { ...prev };
+        delete next[key];
+        return next;
+      });
+    }
+  };
+
+  const setStoreValue = (key: string, value: string) => {
+    setForm((f) => ({
+      ...f,
+      storeConfig: { ...f.storeConfig, [key]: value },
+    }));
+    clearError(key);
+  };
+
+  const selectStore = (id: VectorStoreId) => {
+    setForm((f) => ({ ...f, vectorStore: id, storeConfig: {} }));
+  };
+
+  function requestStoreChange(id: VectorStoreId) {
+    if (!data?.config || id === form.vectorStore) return;
+    setPendingStore(id);
+    setClearKnowledgeBase(false);
+    setStorageChangeOpen(true);
+  }
+
+  async function confirmStoreChange() {
+    if (!pendingStore) return;
+    if (clearKnowledgeBase) {
+      try {
+        const response = await fetch(workspaceUrl('/api/documents'), { method: 'DELETE' });
+        if (!response.ok) throw new Error('Could not clear the knowledge base.');
+        toast.success('Knowledge base cleared.');
+      } catch (error) {
+        toast.error(error instanceof Error ? error.message : 'Could not clear the knowledge base.');
+        return;
+      }
+    }
+    selectStore(pendingStore);
+    setStorageChangeOpen(false);
+    setPendingStore(null);
+  }
+
+  function handleStructuralChangeBlock() {
+    toast('Cannot modify configuration', {
+      description:
+        'This project already has indexed data. You must create a new project to change this setting.',
+      duration: Number.POSITIVE_INFINITY,
+    });
+  }
+
+  async function handleSave() {
+    if (!data?.config) return;
+
+    let hasError = false;
+    const newErrors: Record<string, string> = {};
+
+    if (form.vectorStore && !workspaceCapabilities().managedStorage) {
+      const store = getVectorStore(form.vectorStore);
+      if (store) {
+        const storeErrs = validateStoreConfig(
+          store,
+          form.storeConfig || {},
+          form.indexType || 'hybrid',
+        );
+        if (Object.keys(storeErrs).length > 0) {
+          Object.assign(newErrors, storeErrs);
+          hasError = true;
+        }
+      }
+    }
+
+    setErrors(newErrors);
+    if (hasError) {
+      toast.error('Please fill in all required fields', {
+        duration: Number.POSITIVE_INFINITY,
+      });
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const merged = { ...data.config, ...form };
+      const res = await fetch(configUrl, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(merged),
+      });
+      const json = await res.json();
+      if (!res.ok) throw new Error(json.error ?? 'Failed to save');
+      await mutate(json, { revalidate: false });
+      toast.success('Storage settings saved', {
+        duration: Number.POSITIVE_INFINITY,
+      });
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Failed to save', {
+        duration: Number.POSITIVE_INFINITY,
+      });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex h-40 items-center justify-center">
+        <Loader2 className="size-5 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-lg font-semibold tracking-tight">Storage</h2>
+        <p className="text-sm text-muted-foreground mt-1">
+          Where your processed data is stored and indexed.
+        </p>
+      </div>
+
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="flex items-center gap-2 text-sm">
+            <Layers className="size-3.5 text-primary" />
+            Indexing Strategy
+          </CardTitle>
+          <CardDescription className="text-xs">
+            How your documents are indexed for retrieval.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label className="text-xs">Strategy</Label>
+            <Select
+              value={form.indexType || 'hybrid'}
+              onValueChange={(v) => {
+                if (indexedRun && data?.config && v !== data.config.indexType) {
+                  handleStructuralChangeBlock();
+                  return;
+                }
+                setForm((f) => ({ ...f, indexType: v as IndexType }));
+              }}
+            >
+              <SelectTrigger className="w-full">
+                <span className="font-medium text-sm">
+                  {INDEX_TYPES.find((t) => t.value === (form.indexType || 'hybrid'))?.label ??
+                    'Select strategy…'}
+                </span>
+              </SelectTrigger>
+              <SelectContent>
+                {INDEX_TYPES.map((t) => (
+                  <SelectItem key={t.value} value={t.value}>
+                    <span className="flex flex-col gap-0.5">
+                      <span className="font-medium text-sm">{t.label}</span>
+                      <span className="text-xs text-muted-foreground">{t.description}</span>
+                    </span>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="flex items-center gap-2 text-sm">
+            <Database className="size-3.5 text-primary" />
+            Storage Engine
+          </CardTitle>
+          <CardDescription className="text-xs">
+            Configure your vector database connection.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-5">
+          <div className="space-y-2">
+            <Label className="text-xs">Storage Engine</Label>
+            <Select
+              value={form.vectorStore || ''}
+              onValueChange={(v) => {
+                requestStoreChange(v as VectorStoreId);
+              }}
+            >
+              <SelectTrigger className="w-full">
+                {form.vectorStore ? (
+                  <span className="flex items-center gap-2.5">
+                    <ProviderIcon
+                      src={STORE_META[form.vectorStore]?.iconSrc ?? ''}
+                      alt={getVectorStore(form.vectorStore)?.label ?? form.vectorStore}
+                      pillBg={STORE_META[form.vectorStore]?.pillBg ?? undefined}
+                      size={16}
+                    />
+                    <span className="font-medium text-sm">
+                      {getVectorStore(form.vectorStore)?.label ?? form.vectorStore}
+                    </span>
+                  </span>
+                ) : (
+                  <span className="text-muted-foreground">Select storage engine…</span>
+                )}
+              </SelectTrigger>
+              <SelectContent>
+                {VECTOR_STORE_LIST.filter(
+                  (store) =>
+                    !workspaceCapabilities().vectorStores ||
+                    workspaceCapabilities().vectorStores!.includes(store.id),
+                ).map((s) => {
+                  const meta = STORE_META[s.id];
+                  const isComingSoon = s.installStatus === 'coming-soon';
+                  return (
+                    <SelectItem
+                      key={s.id}
+                      value={s.id}
+                      disabled={isComingSoon}
+                      className={isComingSoon ? 'opacity-50' : ''}
+                    >
+                      <span className="flex items-center gap-2.5 w-full">
+                        {meta && (
+                          <ProviderIcon
+                            src={meta.iconSrc}
+                            alt={s.label}
+                            pillBg={meta.pillBg ?? undefined}
+                            size={16}
+                          />
+                        )}
+                        <span className="flex items-center gap-2">
+                          <span className="font-medium text-sm">{s.label}</span>
+                          {isComingSoon && (
+                            <span className="h-3.5 px-1 text-[9px] font-medium shrink-0 text-muted-foreground border rounded-full flex items-center bg-transparent">
+                              <Clock className="size-2.5 mr-0.5" />
+                              Coming Soon
+                            </span>
+                          )}
+                        </span>
+                      </span>
+                    </SelectItem>
+                  );
+                })}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {form.vectorStore && !workspaceCapabilities().managedStorage && (
+            <div className="border-t pt-4">
+              <StoreFields
+                store={getVectorStore(form.vectorStore)}
+                values={form.storeConfig || {}}
+                errors={errors}
+                onChange={setStoreValue}
+                indexType={form.indexType || 'hybrid'}
+              />
+            </div>
+          )}
+        </CardContent>
+        <CardFooter className="flex justify-end pt-4 border-t">
+          <Button
+            size="lg"
+            disabled={saving || !dirty}
+            onClick={handleSave}
+            className="gap-1.5 px-4"
+          >
+            {saving ? <Loader2 className="size-3.5 animate-spin" /> : <Save className="size-3.5" />}
+            Save
+          </Button>
+        </CardFooter>
+      </Card>
+
+      <AlertDialog open={storageChangeOpen} onOpenChange={setStorageChangeOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Change vector storage?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Your existing indexed vectors stay in the current storage engine and will not be
+              available after this change. Keep the knowledge base to re-index it in the new store,
+              or clear it intentionally below.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <label className="flex cursor-pointer items-start gap-3 rounded-md border p-3 text-sm">
+            <input
+              type="checkbox"
+              className="mt-0.5"
+              checked={clearKnowledgeBase}
+              onChange={(event) => setClearKnowledgeBase(event.target.checked)}
+            />
+            <span>
+              <span className="font-medium">Clear knowledge base</span>
+              <span className="block text-xs text-muted-foreground">
+                Permanently remove documents and the current vector index before changing storage.
+              </span>
+            </span>
+          </label>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => setPendingStore(null)}>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={confirmStoreChange}>
+              {clearKnowledgeBase ? 'Clear and change storage' : 'Keep documents and continue'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,162 @@
+'use client';
+
+import * as React from 'react';
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
+
+import { cn } from '../../lib/utils';
+import { Button } from '@larkup/workspace-ui/button';
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+}
+
+function AlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        'fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  size = 'default',
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: 'default' | 'sm';
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          'group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        '-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogMedia({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        'font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        'text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>) {
+  return <Button data-slot="alert-dialog-action" className={cn(className)} {...props} />;
+}
+
+function AlertDialogCancel({
+  className,
+  variant = 'outline',
+  size = 'default',
+  ...props
+}: AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

package/src/components/ui/alert.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        'font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        'text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot="alert-action" className={cn('absolute top-2 right-2', className)} {...props} />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction };

package/src/components/ui/badge.tsx

@@ -0,0 +1,49 @@
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const badgeVariants = cva(
+  'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all  focus-visible:ring-[3px] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+        destructive:
+          'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
+        outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+        ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant = 'default',
+  render,
+  ...props
+}: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: 'span',
+    props: mergeProps<'span'>(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: 'badge',
+      variant,
+    },
+  });
+}
+
+export { Badge, badgeVariants };

package/src/components/ui/card.tsx

@@ -0,0 +1,9 @@
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+} from '@larkup/workspace-ui';