larkup 0.1.14 → 0.1.21

package/components/settings/settings-layout.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import {
+  Settings2,
+  Sparkles,
+  Server,
+  MessageSquareText,
+  Search,
+  Palette,
+  Database,
+  Plug,
+  Store,
+  Share2,
+  type LucideIcon,
+  Grid2X2Plus,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export type SettingsSection =
+  | 'general'
+  | 'models'
+  | 'storage'
+  | 'server'
+  | 'connections'
+  | 'prompts'
+  | 'playground'
+  | 'appearance'
+  | 'deployment'
+  | 'marketplace'
+  | 'tool-settings';
+
+interface SectionItem {
+  id: SettingsSection;
+  label: string;
+  icon: LucideIcon;
+}
+
+interface SectionGroup {
+  label: string;
+  items: SectionItem[];
+}
+
+const SECTION_GROUPS: SectionGroup[] = [
+  {
+    label: 'Larkup Settiings',
+    items: [
+      { id: 'general', label: 'General', icon: Settings2 },
+      { id: 'models', label: 'AI Models', icon: Sparkles },
+      { id: 'storage', label: 'Storage', icon: Database },
+      { id: 'server', label: 'Larkup Server', icon: Server },
+      { id: 'connections', label: 'Connections', icon: Plug },
+      // { id: 'deployment', label: 'Deploy & Share', icon: Share2 },
+    ],
+  },
+  {
+    label: 'Hub',
+    items: [
+      { id: 'marketplace', label: 'Marketplace', icon: Store },
+      { id: 'tool-settings', label: 'Installed Tools', icon: Plug },
+    ],
+  },
+  {
+    label: 'Advanced',
+    items: [
+      { id: 'prompts', label: 'Agent Customization', icon: Grid2X2Plus },
+      { id: 'playground', label: 'Playground', icon: Search },
+      { id: 'appearance', label: 'Appearance', icon: Palette },
+    ],
+  },
+];
+
+interface SettingsLayoutProps {
+  activeSection: SettingsSection;
+  onSectionChange: (section: SettingsSection) => void;
+  children: React.ReactNode;
+}
+
+export function SettingsLayout({ activeSection, onSectionChange, children }: SettingsLayoutProps) {
+  // Find the label for breadcrumbs
+  const activeLabel =
+    SECTION_GROUPS.flatMap((g) => g.items).find((i) => i.id === activeSection)?.label || 'Settings';
+
+  return (
+    <div className="flex h-full w-full flex-1 min-h-0 bg-transparent">
+      <nav className="hidden md:flex w-[240px] shrink-0 flex-col overflow-y-auto h-full bg-transparent border-r border-border/40">
+        <div className="flex flex-col gap-6 py-6 px-4">
+          {SECTION_GROUPS.map((group) => (
+            <div key={group.label}>
+              <h3 className="px-3 mb-2 text-[11px] font-semibold text-muted-foreground">
+                {group.label}
+              </h3>
+              <div className="flex flex-col gap-0.5">
+                {group.items.map((section) => {
+                  const Icon = section.icon;
+                  const active = activeSection === section.id;
+
+                  return (
+                    <button
+                      key={section.id}
+                      onClick={() => onSectionChange(section.id)}
+                      className={cn(
+                        'group relative flex items-center gap-3 rounded-lg px-3 py-2 text-[13px] transition-all duration-200 text-left outline-none',
+                        active
+                          ? 'font-medium text-foreground bg-[#F0F0F0]'
+                          : 'font-normal text-muted-foreground hover:bg-[#EBEBEB] hover:text-foreground',
+                      )}
+                    >
+                      <Icon className="size-4 shrink-0" strokeWidth={active ? 2.25 : 1.75} />
+                      <span className="truncate">{section.label}</span>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          ))}
+        </div>
+      </nav>
+
+      <div className="flex md:hidden w-full px-4 py-3 gap-2 overflow-x-auto shrink-0 border-b border-border/40 bg-background">
+        {SECTION_GROUPS.flatMap((g) => g.items).map((section) => {
+          const Icon = section.icon;
+          const active = activeSection === section.id;
+
+          return (
+            <button
+              key={section.id}
+              onClick={() => onSectionChange(section.id)}
+              className={cn(
+                'flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium whitespace-nowrap transition-colors border',
+                active
+                  ? 'bg-[#F0F0F0] border-transparent text-foreground'
+                  : 'bg-transparent border-transparent text-muted-foreground hover:bg-[#EBEBEB]',
+              )}
+            >
+              <Icon className="size-3.5" />
+              {section.label}
+            </button>
+          );
+        })}
+      </div>
+
+      <div className="flex-1 min-w-0 h-full overflow-y-auto bg-transparent">
+        <div className="mx-auto max-w-5xl px-8 py-8 md:px-12 md:py-10">{children}</div>
+      </div>
+    </div>
+  );
+}

package/components/settings/storage-section.tsx

@@ -0,0 +1,394 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import useSWR from 'swr';
+import { Loader2, Save, Database, Clock, Layers } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  CardFooter,
+} from '@/components/ui/card';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { toast } from 'sonner';
+import { useWorkspace } from '@/components/workspace/workspace-provider';
+import { ProviderIcon } from '@/components/ui/provider-icon';
+import {
+  VECTOR_STORE_LIST,
+  getVectorStore,
+  validateStoreConfig,
+} from '@larkup/vector-stores/registry';
+import { StoreFields } from '@/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 }>);
+
+type StoreMeta = { iconSrc: string; pillBg: string };
+const STORE_META: Record<string, StoreMeta> = {
+  lancedb: {
+    iconSrc: '/icons/lancedb2.png',
+    pillBg: 'bg-yellow-50 dark:bg-yellow-950/40',
+  },
+  pinecone: {
+    iconSrc: '/icons/pinecone.png',
+    pillBg: 'bg-green-50 dark:bg-green-950/40',
+  },
+};
+
+export function StorageSection() {
+  const { activeServer } = useWorkspace();
+  const serverId = activeServer?.id;
+
+  const configUrl = serverId
+    ? `/api/config?serverId=${encodeURIComponent(serverId)}`
+    : '/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('/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('/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) {
+      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.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 && (
+            <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="sm" disabled={saving || !dirty} onClick={handleSave} className="gap-1.5">
+            {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/components/simple/sdk-connect-dialog.tsx

@@ -1,8 +1,8 @@
-"use client";
+'use client';
 
-import { useState } from "react";
-import { Code2, Copy, Check, ExternalLink } from "lucide-react";
-import { Button } from "@/components/ui/button";
+import { useState } from 'react';
+import { Code2, Copy, Check, ExternalLink } from 'lucide-react';
+import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -10,17 +10,17 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@/components/ui/dialog";
-import { cn } from "@/lib/utils";
-import { CodeViewer } from "@/components/server/code-viewer";
+} from '@/components/ui/dialog';
+import { cn } from '@/lib/utils';
+import { CodeViewer } from '@/components/server/code-viewer';
 
 const TABS = [
-  { id: "python", label: "Python" },
-  { id: "typescript", label: "TypeScript" },
-  { id: "openai", label: "OpenAI Compatible" },
+  { id: 'python', label: 'Python' },
+  { id: 'typescript', label: 'TypeScript' },
+  { id: 'openai', label: 'OpenAI Compatible' },
 ] as const;
 
-type TabId = (typeof TABS)[number]["id"];
+type TabId = (typeof TABS)[number]['id'];
 
 function getSnippets(serverUrl: string): Record<TabId, string> {
   return {
@@ -49,8 +49,8 @@ results = client.query("What is this about?", top_k=5)
 for hit in results.hits:
     print(f"Score: {hit.score} | Text: {hit.text}")`,
 
-    typescript: `// Install: npm install @larkup/rag-sdk
-import { LarkupClient } from "@larkup/rag-sdk";
+    typescript: `// Install: npm install @larkup/sdk
+import { LarkupClient } from "@larkup/sdk";
 
 const client = new LarkupClient({
   baseUrl: "${serverUrl}",
@@ -88,11 +88,17 @@ console.log(text);`,
   };
 }
 
-export function SdkConnectDialog({ serverUrl }: { serverUrl: string }) {
-  const [activeTab, setActiveTab] = useState<TabId>("python");
+export function SdkConnectDialog({
+  serverUrl,
+  disabled = false,
+}: {
+  serverUrl: string;
+  disabled?: boolean;
+}) {
+  const [activeTab, setActiveTab] = useState<TabId>('python');
   const [copied, setCopied] = useState(false);
 
-  const snippets = getSnippets(serverUrl || "http://localhost:8080");
+  const snippets = getSnippets(serverUrl || 'http://localhost:8080');
   const currentSnippet = snippets[activeTab];
 
   async function handleCopy() {
@@ -105,7 +111,7 @@ export function SdkConnectDialog({ serverUrl }: { serverUrl: string }) {
     <Dialog>
       <DialogTrigger
         render={
-          <Button variant="outline" className="gap-2">
+          <Button size={'sm'} variant="outline" className="gap-2 h-8" disabled={disabled}>
             <Code2 className="size-4" />
             Connect to Server SDK
           </Button>
@@ -118,8 +124,7 @@ export function SdkConnectDialog({ serverUrl }: { serverUrl: string }) {
             Connect to your RAG Server
           </DialogTitle>
           <DialogDescription>
-            Use one of these SDKs to programmatically interact with your RAG
-            server.
+            Use one of these SDKs to programmatically interact with your RAG server.
           </DialogDescription>
         </DialogHeader>
 
@@ -131,10 +136,10 @@ export function SdkConnectDialog({ serverUrl }: { serverUrl: string }) {
               type="button"
               onClick={() => setActiveTab(tab.id)}
               className={cn(
-                "flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-all",
+                'flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-all',
                 activeTab === tab.id
-                  ? "bg-background text-foreground shadow-sm"
-                  : "text-muted-foreground hover:text-foreground",
+                  ? 'bg-background text-foreground '
+                  : 'text-muted-foreground hover:text-foreground',
               )}
             >
               {tab.label}
@@ -146,11 +151,11 @@ export function SdkConnectDialog({ serverUrl }: { serverUrl: string }) {
         <div className="relative rounded-lg border bg-slate-50 overflow-hidden">
           <div className="flex items-center justify-between border-b border-slate-200 px-4 py-2 bg-slate-100/50">
             <span className="text-xs text-slate-500 font-mono">
-              {activeTab === "python"
-                ? "main.py"
-                : activeTab === "typescript"
-                  ? "index.ts"
-                  : "connect.ts"}
+              {activeTab === 'python'
+                ? 'main.py'
+                : activeTab === 'typescript'
+                ? 'index.ts'
+                : 'connect.ts'}
             </span>
             <button
               type="button"
@@ -170,9 +175,9 @@ export function SdkConnectDialog({ serverUrl }: { serverUrl: string }) {
               )}
             </button>
           </div>
-          <CodeViewer 
-            value={currentSnippet} 
-            language={activeTab === "python" ? "python" : "javascript"} 
+          <CodeViewer
+            value={currentSnippet}
+            language={activeTab === 'python' ? 'python' : 'javascript'}
             height="auto"
           />
         </div>
@@ -180,13 +185,13 @@ export function SdkConnectDialog({ serverUrl }: { serverUrl: string }) {
         {/* Docs link */}
         <div className="flex items-center justify-between text-sm">
           <span className="text-muted-foreground">
-            Server URL:{" "}
+            Server URL:{' '}
             <code className="rounded bg-muted px-1.5 py-0.5 text-xs font-mono">
-              {serverUrl || "Not running"}
+              {serverUrl || 'Not running'}
             </code>
           </span>
           <a
-            href="https://docs.larkup.dev/sdk/overview"
+            href="https://www.larkup.de/sdk/overview"
             target="_blank"
             rel="noopener noreferrer"
             className="flex items-center gap-1 text-primary hover:underline"