vectra-js 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +625 -0
  3. package/bin/vectra.js +76 -0
  4. package/documentation.md +288 -0
  5. package/index.js +11 -0
  6. package/package.json +53 -0
  7. package/src/backends/anthropic.js +37 -0
  8. package/src/backends/chroma_store.js +110 -0
  9. package/src/backends/gemini.js +68 -0
  10. package/src/backends/huggingface.js +52 -0
  11. package/src/backends/milvus_store.js +61 -0
  12. package/src/backends/ollama.js +63 -0
  13. package/src/backends/openai.js +46 -0
  14. package/src/backends/openrouter.js +51 -0
  15. package/src/backends/prisma_store.js +160 -0
  16. package/src/backends/qdrant_store.js +68 -0
  17. package/src/callbacks.js +31 -0
  18. package/src/config.js +123 -0
  19. package/src/core.js +591 -0
  20. package/src/evaluation/index.js +15 -0
  21. package/src/interfaces.js +21 -0
  22. package/src/memory.js +96 -0
  23. package/src/processor.js +155 -0
  24. package/src/reranker.js +26 -0
  25. package/src/ui/index.html +665 -0
  26. package/src/ui/script.js +785 -0
  27. package/src/ui/style.css +281 -0
  28. package/src/webconfig_server.js +175 -0
package/src/ui/index.html ADDED
@@ -0,0 +1,665 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Vectra Configuration</title>
7
+ <!-- Tailwind CSS CDN -->
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
12
+ <style>
13
+ body { font-family: 'Inter', sans-serif; }
14
+ /* Custom scrollbar for JSON preview */
15
+ .scrollbar-hide::-webkit-scrollbar { display: none; }
16
+ .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
17
+
18
+ /* Smooth transition for JSON opacity */
19
+ .json-section { transition: opacity 0.3s ease-in-out; }
20
+ .json-dimmed { opacity: 0.4; filter: blur(0.5px); grayscale: 100%; }
21
+ .json-active { opacity: 1; }
22
+ </style>
23
+ </head>
24
+ <body class="bg-gray-50 text-slate-800 antialiased h-screen flex overflow-hidden">
25
+
26
+ <!-- Sidebar / Navigation (20%) -->
27
+ <aside class="w-[20%] bg-white border-r border-gray-200 flex-shrink-0 flex flex-col z-20 shadow-sm">
28
+ <div class="p-6 border-b border-gray-100 flex items-center space-x-3">
29
+ <div class="bg-indigo-600 p-2 rounded-lg text-white">
30
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
31
+ </div>
32
+ <span class="font-bold text-xl tracking-tight text-gray-900">Vectra</span>
33
+ </div>
34
+
35
+ <nav class="flex-1 overflow-y-auto p-4 space-y-1">
36
+ <a href="#embedding" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-indigo-600 transition-colors active" data-target="embedding">
37
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg>
38
+ <span>Embedding</span>
39
+ </a>
40
+ <a href="#llm" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-indigo-600 transition-colors" data-target="llm">
41
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
42
+ <span>LLM Provider</span>
43
+ </a>
44
+ <a href="#database" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-indigo-600 transition-colors" data-target="database">
45
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path></svg>
46
+ <span>Database</span>
47
+ </a>
48
+ <a href="#chunking" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-indigo-600 transition-colors" data-target="chunking">
49
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg>
50
+ <span>Chunking</span>
51
+ </a>
52
+ <a href="#retrieval" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-indigo-600 transition-colors" data-target="retrieval">
53
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
54
+ <span>Retrieval</span>
55
+ </a>
56
+ <a href="#reranking" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-indigo-600 transition-colors" data-target="reranking">
57
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"></path></svg>
58
+ <span>Reranking</span>
59
+ </a>
60
+ <a href="#metadata" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-indigo-600 transition-colors" data-target="metadata">
61
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></svg>
62
+ <span>Metadata</span>
63
+ </a>
64
+ <a href="#query-planning" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-indigo-600 transition-colors" data-target="query-planning">
65
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
66
+ <span>Query Planning</span>
67
+ </a>
68
+ <a href="#grounding" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-indigo-600 transition-colors" data-target="grounding">
69
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg>
70
+ <span>Grounding</span>
71
+ </a>
72
+ <a href="#generation" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-indigo-600 transition-colors" data-target="generation">
73
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
74
+ <span>Generation</span>
75
+ </a>
76
+ <a href="#prompts" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-indigo-600 transition-colors" data-target="prompts">
77
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
78
+ <span>Prompts</span>
79
+ </a>
80
+ </nav>
81
+
82
+ <!-- Sidebar Footer Info -->
83
+ <div class="p-4 border-t border-gray-100 text-xs text-gray-400 text-center">
84
+ Vectra v1.0.0
85
+ </div>
86
+ </aside>
87
+
88
+ <!-- Main Content (50%) -->
89
+ <main class="w-[50%] flex flex-col overflow-hidden border-r border-gray-200 bg-gray-50">
90
+ <!-- Configuration Forms Area -->
91
+ <div class="flex-1 overflow-y-auto p-8 lg:p-12 scroll-smooth" id="main-scroll">
92
+ <div class="max-w-3xl mx-auto space-y-12 pb-32">
93
+
94
+ <header class="mb-8 flex justify-between items-end">
95
+ <div>
96
+ <h1 class="text-3xl font-bold text-gray-900 tracking-tight">Pipeline Settings</h1>
97
+ <p class="text-base text-gray-600 mt-2">Configure your RAG pipeline parameters and behavior.</p>
98
+ </div>
99
+ <div class="flex items-center space-x-6">
100
+ <!-- Backend Toggle -->
101
+ <div class="flex items-center bg-white rounded-lg p-1 border border-gray-200 shadow-sm">
102
+ <button type="button" id="backend-node" class="px-3 py-1.5 text-sm font-medium rounded-md transition-all duration-200 text-indigo-600 bg-indigo-50 shadow-sm">
103
+ Node.js
104
+ </button>
105
+ <button type="button" id="backend-python" class="px-3 py-1.5 text-sm font-medium rounded-md transition-all duration-200 text-gray-500 hover:text-gray-900">
106
+ Python
107
+ </button>
108
+ </div>
109
+
110
+ <div class="flex items-center space-x-2">
111
+ <input type="checkbox" id="auto-focus-toggle" class="rounded text-indigo-600 focus:ring-indigo-500 border-gray-300 h-4 w-4">
112
+ <label for="auto-focus-toggle" class="text-sm text-gray-700 select-none">Auto-Focus Mode</label>
113
+ </div>
114
+ </div>
115
+ </header>
116
+
117
+ <form id="config-form" class="space-y-10">
118
+
119
+ <!-- Embedding Section -->
120
+ <section id="embedding" class="scroll-mt-6 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-all duration-200 hover:shadow-md">
121
+ <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center cursor-pointer accordion-header" data-target="embedding-content">
122
+ <div>
123
+ <h2 class="text-lg font-semibold text-gray-900">Embedding Model</h2>
124
+ <p class="text-xs text-gray-500 mt-0.5">Define how text is converted into vectors.</p>
125
+ </div>
126
+ <svg class="w-5 h-5 text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
127
+ </div>
128
+ <div id="embedding-content" class="p-6 space-y-6">
129
+ <div>
130
+ <label class="block text-sm font-medium text-gray-700 mb-1">Provider</label>
131
+ <select name="embedding.provider" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
132
+ <option value="openai">OpenAI</option>
133
+ <option value="gemini">Gemini</option>
134
+ <option value="anthropic">Anthropic</option>
135
+ <option value="openrouter">OpenRouter</option>
136
+ <option value="huggingface">HuggingFace</option>
137
+ </select>
138
+ </div>
139
+ <div>
140
+ <label class="block text-sm font-medium text-gray-700 mb-1">API Key</label>
141
+ <input type="password" name="embedding.apiKey" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="sk-...">
142
+ </div>
143
+ <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
144
+ <div>
145
+ <label class="block text-sm font-medium text-gray-700 mb-1">Model Name</label>
146
+ <input type="text" name="embedding.modelName" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="text-embedding-3-small">
147
+ </div>
148
+ <div>
149
+ <label class="block text-sm font-medium text-gray-700 mb-1">Dimensions</label>
150
+ <input type="number" name="embedding.dimensions" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="1536">
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </section>
155
+
156
+ <!-- LLM Section -->
157
+ <section id="llm" class="scroll-mt-6 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-all duration-200 hover:shadow-md">
158
+ <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center cursor-pointer accordion-header" data-target="llm-content">
159
+ <div>
160
+ <h2 class="text-lg font-semibold text-gray-900">LLM Provider</h2>
161
+ <p class="text-xs text-gray-500 mt-0.5">Configure the generation model.</p>
162
+ </div>
163
+ <svg class="w-5 h-5 text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
164
+ </div>
165
+ <div id="llm-content" class="p-6 space-y-6">
166
+ <div>
167
+ <label class="block text-sm font-medium text-gray-700 mb-1">Provider</label>
168
+ <select name="llm.provider" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
169
+ <option value="openai">OpenAI</option>
170
+ <option value="gemini">Gemini</option>
171
+ <option value="anthropic">Anthropic</option>
172
+ <option value="openrouter">OpenRouter</option>
173
+ <option value="huggingface">HuggingFace</option>
174
+ </select>
175
+ </div>
176
+ <div>
177
+ <label class="block text-sm font-medium text-gray-700 mb-1">API Key</label>
178
+ <input type="password" name="llm.apiKey" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="sk-...">
179
+ </div>
180
+ <div>
181
+ <label class="block text-sm font-medium text-gray-700 mb-1">Model Name</label>
182
+ <input type="text" name="llm.modelName" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="gpt-4o">
183
+ </div>
184
+ <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
185
+ <div>
186
+ <label class="block text-sm font-medium text-gray-700 mb-1">Temperature</label>
187
+ <div class="flex items-center space-x-3">
188
+ <input type="range" id="temp-slider" min="0" max="1" step="0.1" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
189
+ <input type="number" id="temp-input" step="0.1" min="0" max="1" name="llm.temperature" class="w-20 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-2 border text-center">
190
+ </div>
191
+ </div>
192
+ <div>
193
+ <label class="block text-sm font-medium text-gray-700 mb-1">Max Tokens</label>
194
+ <input type="number" name="llm.maxTokens" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="1024">
195
+ </div>
196
+ </div>
197
+ <div>
198
+ <label class="block text-sm font-medium text-gray-700 mb-1">Base URL</label>
199
+ <input type="text" name="llm.baseUrl" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="https://api.openai.com/v1 (Optional)">
200
+ <p class="mt-1 text-xs text-gray-500 hidden" id="openrouter-base-hint">OpenRouter Default: https://openrouter.ai/api/v1</p>
201
+ </div>
202
+
203
+ <!-- OpenRouter Specifics -->
204
+ <div id="openrouter-extras" class="hidden space-y-4 border-l-4 border-indigo-100 pl-4 py-2">
205
+ <h3 class="text-sm font-medium text-indigo-900">OpenRouter Configuration</h3>
206
+ <div>
207
+ <label class="block text-sm font-medium text-gray-700 mb-1">Site URL (Referer)</label>
208
+ <input type="text" id="or-referer" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="https://your-site.com">
209
+ </div>
210
+ <div>
211
+ <label class="block text-sm font-medium text-gray-700 mb-1">Site Name (Title)</label>
212
+ <input type="text" id="or-title" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="My App">
213
+ </div>
214
+ </div>
215
+
216
+ <div>
217
+ <label class="block text-sm font-medium text-gray-700 mb-2">Default Headers</label>
218
+ <div id="headers-builder" class="space-y-2 mb-3">
219
+ <!-- Dynamic rows -->
220
+ </div>
221
+ <button type="button" id="add-header-btn" class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
222
+ <svg class="-ml-0.5 mr-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
223
+ <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
224
+ </svg>
225
+ Add Header
226
+ </button>
227
+ <input type="hidden" name="llm.defaultHeaders"> <!-- Hidden input for serialization -->
228
+ </div>
229
+ </div>
230
+ </section>
231
+
232
+ <!-- Database Section -->
233
+ <section id="database" class="scroll-mt-6 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-all duration-200 hover:shadow-md">
234
+ <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center cursor-pointer accordion-header" data-target="database-content">
235
+ <div>
236
+ <h2 class="text-lg font-semibold text-gray-900">Vector Database</h2>
237
+ <p class="text-xs text-gray-500 mt-0.5">Storage for your documents and embeddings.</p>
238
+ </div>
239
+ <svg class="w-5 h-5 text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
240
+ </div>
241
+ <div id="database-content" class="p-6 space-y-6">
242
+ <div>
243
+ <label class="block text-sm font-medium text-gray-700 mb-1">Type</label>
244
+ <select name="database.type" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
245
+ <option value="prisma">Prisma (PostgreSQL)</option>
246
+ <option value="chroma">ChromaDB</option>
247
+ <option value="qdrant">Qdrant</option>
248
+ <option value="milvus">Milvus</option>
249
+ </select>
250
+ </div>
251
+ <div>
252
+ <label class="block text-sm font-medium text-gray-700 mb-1">Table / Collection Name</label>
253
+ <input type="text" name="database.tableName" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="Document">
254
+ </div>
255
+ <div>
256
+ <label class="block text-sm font-medium text-gray-700 mb-1">Column Map (JSON)</label>
257
+ <textarea name="database.columnMap" rows="4" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border font-mono text-xs"></textarea>
258
+ <p class="mt-1 text-xs text-gray-500">Maps internal fields (content, vector, metadata) to DB columns.</p>
259
+ </div>
260
+ </div>
261
+ </section>
262
+
263
+ <!-- Chunking Section -->
264
+ <section id="chunking" class="scroll-mt-6 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-all duration-200 hover:shadow-md">
265
+ <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center cursor-pointer accordion-header" data-target="chunking-content">
266
+ <div>
267
+ <h2 class="text-lg font-semibold text-gray-900">Chunking Strategy</h2>
268
+ <p class="text-xs text-gray-500 mt-0.5">Split documents for processing.</p>
269
+ </div>
270
+ <svg class="w-5 h-5 text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
271
+ </div>
272
+ <div id="chunking-content" class="p-6 space-y-6">
273
+ <div>
274
+ <label class="block text-sm font-medium text-gray-700 mb-1">Strategy</label>
275
+ <select name="chunking.strategy" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
276
+ <option value="recursive">Recursive Character</option>
277
+ <option value="agentic">Agentic (Semantic)</option>
278
+ </select>
279
+ </div>
280
+ <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
281
+ <div>
282
+ <label class="block text-sm font-medium text-gray-700 mb-1">Chunk Size</label>
283
+ <input type="number" name="chunking.chunkSize" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="1000">
284
+ </div>
285
+ <div>
286
+ <label class="block text-sm font-medium text-gray-700 mb-1">Chunk Overlap</label>
287
+ <input type="number" name="chunking.chunkOverlap" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="200">
288
+ </div>
289
+ </div>
290
+ <div>
291
+ <label class="block text-sm font-medium text-gray-700 mb-1">Separators (JSON Array)</label>
292
+ <textarea name="chunking.separators" rows="2" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border font-mono text-xs"></textarea>
293
+ </div>
294
+ <div id="agentic-llm-content" class="space-y-4 hidden border-l-4 border-indigo-100 pl-4 py-2">
295
+ <h3 class="text-sm font-medium text-indigo-900">Agentic Chunking LLM</h3>
296
+ <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
297
+ <div>
298
+ <label class="block text-sm font-medium text-gray-700 mb-1">Provider</label>
299
+ <select name="chunking.agentic.provider" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
300
+ <option value="openai">OpenAI</option>
301
+ <option value="gemini">Gemini</option>
302
+ <option value="anthropic">Anthropic</option>
303
+ <option value="openrouter">OpenRouter</option>
304
+ <option value="huggingface">HuggingFace</option>
305
+ </select>
306
+ </div>
307
+ <div>
308
+ <label class="block text-sm font-medium text-gray-700 mb-1">Model Name</label>
309
+ <input type="text" name="chunking.agentic.modelName" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="gpt-4o-mini">
310
+ </div>
311
+ <div>
312
+ <label class="block text-sm font-medium text-gray-700 mb-1">API Key</label>
313
+ <input type="password" name="chunking.agentic.apiKey" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="sk-...">
314
+ </div>
315
+ <div>
316
+ <label class="block text sm font-medium text-gray-700 mb-1">Temperature</label>
317
+ <input type="number" step="0.1" min="0" max="1" name="chunking.agentic.temperature" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="0">
318
+ </div>
319
+ <div>
320
+ <label class="block text-sm font-medium text-gray-700 mb-1">Max Tokens</label>
321
+ <input type="number" name="chunking.agentic.maxTokens" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="512">
322
+ </div>
323
+ <div class="sm:col-span-2">
324
+ <label class="block text-sm font-medium text-gray-700 mb-1">Base URL</label>
325
+ <input type="text" name="chunking.agentic.baseUrl" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="https://...">
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ </section>
331
+
332
+ <!-- Retrieval Section -->
333
+ <section id="retrieval" class="scroll-mt-6 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-all duration-200 hover:shadow-md">
334
+ <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center cursor-pointer accordion-header" data-target="retrieval-content">
335
+ <div>
336
+ <h2 class="text-lg font-semibold text-gray-900">Retrieval Strategy</h2>
337
+ <p class="text-xs text-gray-500 mt-0.5">Find relevant context.</p>
338
+ </div>
339
+ <div class="flex items-center space-x-3">
340
+ <label class="flex items-center space-x-2 text-xs text-gray-600 select-none">
341
+ <input type="checkbox" name="toggle.retrieval" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
342
+ <span>Enable</span>
343
+ </label>
344
+ <svg class="w-5 h-5 text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
345
+ </div>
346
+ </div>
347
+ <div id="retrieval-content" class="p-6 space-y-6">
348
+ <div>
349
+ <label class="block text-sm font-medium text-gray-700 mb-1">Strategy</label>
350
+ <select name="retrieval.strategy" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
351
+ <option value="naive">Naive (Cosine Similarity)</option>
352
+ <option value="hyde">HyDE (Hypothetical Document)</option>
353
+ <option value="multi_query">Multi-Query</option>
354
+ <option value="hybrid">Hybrid (Keyword + Vector)</option>
355
+ <option value="mmr">MMR (Diversify Results)</option>
356
+ </select>
357
+ </div>
358
+ <div>
359
+ <label class="block text-sm font-medium text-gray-700 mb-1">Hybrid Alpha (0.0 - 1.0)</label>
360
+ <input type="number" step="0.1" min="0" max="1" name="retrieval.hybridAlpha" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="0.5">
361
+ <p class="mt-1 text-xs text-gray-500">0.0 = Keyword only, 1.0 = Vector only.</p>
362
+ </div>
363
+ <div>
364
+ <label class="block text-sm font-medium text-gray-700 mb-1">MMR Lambda (0.0 - 1.0)</label>
365
+ <input type="number" step="0.05" min="0" max="1" name="retrieval.mmrLambda" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="0.5">
366
+ </div>
367
+ <div>
368
+ <label class="block text-sm font-medium text-gray-700 mb-1">MMR Fetch K</label>
369
+ <input type="number" step="1" min="1" name="retrieval.mmrFetchK" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="20">
370
+ </div>
371
+ <div id="retrieval-llm-content" class="space-y-4 hidden border-l-4 border-indigo-100 pl-4 py-2">
372
+ <h3 class="text-sm font-medium text-indigo-900">Retrieval LLM Config</h3>
373
+ <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
374
+ <div>
375
+ <label class="block text-sm font-medium text-gray-700 mb-1">Provider</label>
376
+ <select name="retrieval.llm.provider" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
377
+ <option value="openai">OpenAI</option>
378
+ <option value="gemini">Gemini</option>
379
+ <option value="anthropic">Anthropic</option>
380
+ <option value="openrouter">OpenRouter</option>
381
+ <option value="huggingface">HuggingFace</option>
382
+ </select>
383
+ </div>
384
+ <div>
385
+ <label class="block text-sm font-medium text-gray-700 mb-1">Model Name</label>
386
+ <input type="text" name="retrieval.llm.modelName" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="gpt-4o-mini">
387
+ </div>
388
+ <div>
389
+ <label class="block text-sm font-medium text-gray-700 mb-1">Temperature</label>
390
+ <input type="number" step="0.1" min="0" max="1" name="retrieval.llm.temperature" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="0">
391
+ </div>
392
+ <div>
393
+ <label class="block text-sm font-medium text-gray-700 mb-1">Max Tokens</label>
394
+ <input type="number" name="retrieval.llm.maxTokens" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="512">
395
+ </div>
396
+ <div class="sm:col-span-2">
397
+ <label class="block text-sm font-medium text-gray-700 mb-1">Base URL</label>
398
+ <input type="text" name="retrieval.llm.baseUrl" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="https://...">
399
+ </div>
400
+ </div>
401
+ </div>
402
+ </div>
403
+ </section>
404
+
405
+ <!-- Reranking Section -->
406
+ <section id="reranking" class="scroll-mt-6 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-all duration-200 hover:shadow-md">
407
+ <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center cursor-pointer accordion-header" data-target="reranking-content">
408
+ <div>
409
+ <h2 class="text-lg font-semibold text-gray-900">Reranking</h2>
410
+ <p class="text-xs text-gray-500 mt-0.5">Improve result relevance.</p>
411
+ </div>
412
+ <svg class="w-5 h-5 text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
413
+ </div>
414
+ <div id="reranking-content" class="p-6 space-y-6">
415
+ <div class="flex items-center space-x-3">
416
+ <input type="checkbox" name="reranking.enabled" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
417
+ <label class="text-sm font-medium text-gray-700">Enable Reranking</label>
418
+ </div>
419
+ <div>
420
+ <label class="block text-sm font-medium text-gray-700 mb-1">Top N</label>
421
+ <input type="number" name="reranking.topN" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="5">
422
+ </div>
423
+ <div>
424
+ <label class="block text-sm font-medium text-gray-700 mb-1">Window Size</label>
425
+ <input type="number" name="reranking.windowSize" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="20">
426
+ </div>
427
+ <div id="reranking-llm-content" class="space-y-4 hidden border-l-4 border-indigo-100 pl-4 py-2">
428
+ <h3 class="text-sm font-medium text-indigo-900">Reranking LLM Config</h3>
429
+ <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
430
+ <div>
431
+ <label class="block text-sm font-medium text-gray-700 mb-1">Provider</label>
432
+ <select name="reranking.llm.provider" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
433
+ <option value="openai">OpenAI</option>
434
+ <option value="gemini">Gemini</option>
435
+ <option value="anthropic">Anthropic</option>
436
+ <option value="openrouter">OpenRouter</option>
437
+ <option value="huggingface">HuggingFace</option>
438
+ </select>
439
+ </div>
440
+ <div>
441
+ <label class="block text-sm font-medium text-gray-700 mb-1">Model Name</label>
442
+ <input type="text" name="reranking.llm.modelName" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="gpt-4o-mini">
443
+ </div>
444
+ <div>
445
+ <label class="block text-sm font-medium text-gray-700 mb-1">Temperature</label>
446
+ <input type="number" step="0.1" min="0" max="1" name="reranking.llm.temperature" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="0">
447
+ </div>
448
+ <div>
449
+ <label class="block text-sm font-medium text-gray-700 mb-1">Max Tokens</label>
450
+ <input type="number" name="reranking.llm.maxTokens" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="512">
451
+ </div>
452
+ <div class="sm:col-span-2">
453
+ <label class="block text-sm font-medium text-gray-700 mb-1">Base URL</label>
454
+ <input type="text" name="reranking.llm.baseUrl" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="https://...">
455
+ </div>
456
+ </div>
457
+ </div>
458
+ </div>
459
+ </section>
460
+ <!-- Metadata Section -->
461
+ <section id="metadata" class="scroll-mt-6 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-all duration-200 hover:shadow-md">
462
+ <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center cursor-pointer accordion-header" data-target="metadata-content">
463
+ <div>
464
+ <h2 class="text-lg font-semibold text-gray-900">Metadata</h2>
465
+ <p class="text-xs text-gray-500 mt-0.5">Configure metadata extraction and filters.</p>
466
+ </div>
467
+ <div class="flex items-center space-x-3">
468
+ <label class="flex items-center space-x-2 text-xs text-gray-600 select-none">
469
+ <input type="checkbox" name="toggle.metadata" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
470
+ <span>Enable</span>
471
+ </label>
472
+ <svg class="w-5 h-5 text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
473
+ </div>
474
+ </div>
475
+ <div id="metadata-content" class="p-6 space-y-6">
476
+ <div>
477
+ <label class="block text-sm font-medium text-gray-700 mb-1">Filters (JSON)</label>
478
+ <textarea name="metadata.filters" rows="3" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border font-mono text-xs"></textarea>
479
+ <p class="mt-1 text-xs text-gray-500">Global metadata filters to apply.</p>
480
+ </div>
481
+ </div>
482
+ </section>
483
+
484
+ <!-- Query Planning Section -->
485
+ <section id="query-planning" class="scroll-mt-6 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-all duration-200 hover:shadow-md">
486
+ <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center cursor-pointer accordion-header" data-target="query-planning-content">
487
+ <div>
488
+ <h2 class="text-lg font-semibold text-gray-900">Query Planning</h2>
489
+ <p class="text-xs text-gray-500 mt-0.5">Decompose and optimize queries.</p>
490
+ </div>
491
+ <div class="flex items-center space-x-3">
492
+ <label class="flex items-center space-x-2 text-xs text-gray-600 select-none">
493
+ <input type="checkbox" name="toggle.queryPlanning" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
494
+ <span>Enable</span>
495
+ </label>
496
+ <svg class="w-5 h-5 text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
497
+ </div>
498
+ </div>
499
+ <div id="query-planning-content" class="p-6 space-y-6">
500
+ <div>
501
+ <label class="block text-sm font-medium text-gray-700 mb-1">Strategy</label>
502
+ <select name="queryPlanning.strategy" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
503
+ <option value="none">None</option>
504
+ <option value="decomposition">Decomposition</option>
505
+ <option value="hyde">HyDE</option>
506
+ </select>
507
+ </div>
508
+ <div>
509
+ <label class="block text-sm font-medium text-gray-700 mb-1">Initial Prompts (JSON Array)</label>
510
+ <textarea name="queryPlanning.initialPrompts" rows="3" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border font-mono text-xs"></textarea>
511
+ </div>
512
+ <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-3">
513
+ <div>
514
+ <label class="block text-sm font-medium text-gray-700 mb-1">Token Budget</label>
515
+ <input type="number" name="queryPlanning.tokenBudget" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="2048">
516
+ </div>
517
+ <div>
518
+ <label class="block text-sm font-medium text-gray-700 mb-1">Prefer Summaries Below</label>
519
+ <input type="number" name="queryPlanning.preferSummariesBelow" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="1024">
520
+ </div>
521
+ <div class="flex items-center space-x-3 pt-6">
522
+ <input type="checkbox" name="queryPlanning.includeCitations" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
523
+ <label class="text-sm font-medium text-gray-700">Include Citations</label>
524
+ </div>
525
+ </div>
526
+ </div>
527
+ </section>
528
+
529
+ <!-- Grounding Section -->
530
+ <section id="grounding" class="scroll-mt-6 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-all duration-200 hover:shadow-md">
531
+ <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center cursor-pointer accordion-header" data-target="grounding-content">
532
+ <div>
533
+ <h2 class="text-lg font-semibold text-gray-900">Grounding</h2>
534
+ <p class="text-xs text-gray-500 mt-0.5">Verify and cite sources.</p>
535
+ </div>
536
+ <div class="flex items-center space-x-3">
537
+ <label class="flex items-center space-x-2 text-xs text-gray-600 select-none">
538
+ <input type="checkbox" name="toggle.grounding" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
539
+ <span>Enable</span>
540
+ </label>
541
+ <svg class="w-5 h-5 text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
542
+ </div>
543
+ </div>
544
+ <div id="grounding-content" class="p-6 space-y-6">
545
+ <div class="flex items-center space-x-3">
546
+ <input type="checkbox" name="grounding.enabled" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
547
+ <label class="text-sm font-medium text-gray-700">Enable Grounding Check</label>
548
+ </div>
549
+ <div>
550
+ <label class="block text-sm font-medium text-gray-700 mb-1">Threshold (0.0 - 1.0)</label>
551
+ <input type="number" step="0.1" min="0" max="1" name="grounding.threshold" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="0.7">
552
+ </div>
553
+ <div class="flex items-center space-x-3">
554
+ <input type="checkbox" name="grounding.strict" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
555
+ <label class="text-sm font-medium text-gray-700">Strict Mode</label>
556
+ </div>
557
+ <div>
558
+ <label class="block text-sm font-medium text-gray-700 mb-1">Max Snippets</label>
559
+ <input type="number" name="grounding.maxSnippets" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="3">
560
+ </div>
561
+ </div>
562
+ </section>
563
+
564
+ <!-- Generation Section -->
565
+ <section id="generation" class="scroll-mt-6 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-all duration-200 hover:shadow-md">
566
+ <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center cursor-pointer accordion-header" data-target="generation-content">
567
+ <div>
568
+ <h2 class="text-lg font-semibold text-gray-900">Generation</h2>
569
+ <p class="text-xs text-gray-500 mt-0.5">Final response generation settings.</p>
570
+ </div>
571
+ <div class="flex items-center space-x-3">
572
+ <label class="flex items-center space-x-2 text-xs text-gray-600 select-none">
573
+ <input type="checkbox" name="toggle.generation" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
574
+ <span>Enable</span>
575
+ </label>
576
+ <svg class="w-5 h-5 text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
577
+ </div>
578
+ </div>
579
+ <div id="generation-content" class="p-6 space-y-6">
580
+ <div>
581
+ <label class="block text-sm font-medium text-gray-700 mb-1">Style</label>
582
+ <select name="generation.style" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
583
+ <option value="concise">Concise</option>
584
+ <option value="detailed">Detailed</option>
585
+ <option value="creative">Creative</option>
586
+ </select>
587
+ </div>
588
+ <div>
589
+ <label class="block text-sm font-medium text-gray-700 mb-1">Max Length</label>
590
+ <input type="number" name="generation.maxLength" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="2048">
591
+ </div>
592
+ <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
593
+ <div>
594
+ <label class="block text-sm font-medium text-gray-700 mb-1">Structured Output</label>
595
+ <select name="generation.structuredOutput" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
596
+ <option value="none">None</option>
597
+ <option value="citations">Citations</option>
598
+ </select>
599
+ </div>
600
+ <div>
601
+ <label class="block text-sm font-medium text-gray-700 mb-1">Output Format</label>
602
+ <select name="generation.outputFormat" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
603
+ <option value="text">Text</option>
604
+ <option value="json">JSON</option>
605
+ </select>
606
+ </div>
607
+ </div>
608
+ </div>
609
+ </section>
610
+
611
+ <!-- Prompts Section -->
612
+ <section id="prompts" class="scroll-mt-6 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-all duration-200 hover:shadow-md">
613
+ <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center cursor-pointer accordion-header" data-target="prompts-content">
614
+ <div>
615
+ <h2 class="text-lg font-semibold text-gray-900">Prompts</h2>
616
+ <p class="text-xs text-gray-500 mt-0.5">Customize system and user prompts.</p>
617
+ </div>
618
+ <div class="flex items-center space-x-3">
619
+ <label class="flex items-center space-x-2 text-xs text-gray-600 select-none">
620
+ <input type="checkbox" name="toggle.prompts" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
621
+ <span>Enable</span>
622
+ </label>
623
+ <svg class="w-5 h-5 text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
624
+ </div>
625
+ </div>
626
+ <div id="prompts-content" class="p-6 space-y-6">
627
+ <div>
628
+ <label class="block text-sm font-medium text-gray-700 mb-1">System Prompt</label>
629
+ <textarea name="prompts.system" rows="4" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border font-mono text-xs"></textarea>
630
+ </div>
631
+ <div>
632
+ <label class="block text-sm font-medium text-gray-700 mb-1">User Prompt Template</label>
633
+ <textarea name="prompts.user" rows="4" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border font-mono text-xs"></textarea>
634
+ </div>
635
+ </div>
636
+ </section>
637
+ </form>
638
+ </div>
639
+
640
+ <!-- Sticky Footer for Save -->
641
+ <div class="fixed bottom-0 left-[20%] right-[30%] p-4 bg-white/90 backdrop-blur-sm border-t border-gray-200 z-10 flex justify-end items-center space-x-4">
642
+ <div id="status-msg" class="text-sm font-medium transition-colors duration-300"></div>
643
+ <button id="save-btn" class="inline-flex justify-center items-center py-2.5 px-6 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all transform hover:scale-105">
644
+ Save Configuration
645
+ </button>
646
+ </div>
647
+ </div>
648
+ </main>
649
+
650
+ <!-- Live Summary Sidebar (30%) -->
651
+ <aside class="w-[30%] bg-gray-50 border-l border-gray-200 flex-shrink-0 flex flex-col hidden lg:flex">
652
+ <div class="px-6 py-4 border-b border-gray-200 bg-white shadow-sm z-10">
653
+ <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider">Live Preview</h3>
654
+ <p class="text-xs text-gray-500 mt-1">Real-time configuration state</p>
655
+ </div>
656
+ <div id="preview-scroll" class="flex-1 overflow-y-auto p-4 bg-[#1e1e1e] text-[#d4d4d4] font-mono text-xs">
657
+ <div id="json-preview" class="space-y-1">
658
+ <!-- Dynamic Content -->
659
+ </div>
660
+ </div>
661
+ </aside>
662
+
663
+ <script src="script.js"></script>
664
+ </body>
665
+ </html>