Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> | |
| <meta name="theme-color" content="#0f172a" /> | |
| <title>LangGraph Multi-Agent Chat</title> | |
| <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ctext y='50' font-size='48'%3E%F0%9F%A4%96%3C/text%3E%3C/svg%3E" /> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| brand: { | |
| 50: "#eef4ff", | |
| 100: "#d9e6ff", | |
| 500: "#4f7cff", | |
| 600: "#2f5bff", | |
| 700: "#1e44e0", | |
| }, | |
| }, | |
| }, | |
| }, | |
| }; | |
| </script> | |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.6/dist/purify.min.js"></script> | |
| <link rel="stylesheet" href="/assets/styles.css" /> | |
| </head> | |
| <body class="h-[100dvh] bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-100 antialiased"> | |
| <div class="flex h-[100dvh] flex-col"> | |
| <header class="sticky top-0 z-20 border-b border-slate-200/70 bg-white/80 backdrop-blur dark:border-slate-800 dark:bg-slate-900/80"> | |
| <div class="mx-auto flex max-w-3xl items-center justify-between gap-3 px-4 py-3"> | |
| <div class="flex items-center gap-2 min-w-0"> | |
| <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-brand-500 to-brand-700 text-white shadow-sm"> | |
| <span aria-hidden="true">AI</span> | |
| </div> | |
| <div class="min-w-0"> | |
| <h1 class="truncate text-sm font-semibold sm:text-base"> | |
| LangGraph Multi-Agent RAG | |
| </h1> | |
| <p class="truncate text-[11px] text-slate-500 dark:text-slate-400 sm:text-xs"> | |
| Planner · Product · Policy · Tech · General · DuckDuckGo | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <span id="status-dot" class="h-2.5 w-2.5 rounded-full bg-slate-400" aria-hidden="true"></span> | |
| <button | |
| id="settings-btn" | |
| type="button" | |
| class="rounded-lg border border-slate-200 bg-white px-2.5 py-1.5 text-xs font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800" | |
| > | |
| Settings | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <main | |
| id="messages" | |
| class="flex-1 overflow-y-auto" | |
| aria-live="polite" | |
| > | |
| <div class="mx-auto w-full max-w-3xl px-4 py-6 space-y-4" id="messages-inner"> | |
| <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900"> | |
| <p class="text-sm leading-relaxed text-slate-700 dark:text-slate-200"> | |
| Welcome! Ask a single question that can span | |
| <span class="font-medium">products</span>, | |
| <span class="font-medium">policies</span>, | |
| <span class="font-medium">tech support</span>, or | |
| <span class="font-medium">general knowledge</span>. The planner | |
| will pick one or more specialist agents, each using RAG and | |
| DuckDuckGo, and a synthesizer will merge the answers. | |
| </p> | |
| <div class="mt-3 flex flex-wrap gap-2" id="suggestions"> | |
| <button class="suggestion rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700"> | |
| What products are available? | |
| </button> | |
| <button class="suggestion rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700"> | |
| What is the return policy? | |
| </button> | |
| <button class="suggestion rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700"> | |
| How do I fix an overheating Dell laptop? | |
| </button> | |
| <button class="suggestion rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700"> | |
| What Dell laptops are available, what is the return policy, and how do I prevent overheating? | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="sticky bottom-0 z-20 border-t border-slate-200/70 bg-white/90 backdrop-blur pb-[env(safe-area-inset-bottom)] dark:border-slate-800 dark:bg-slate-900/90"> | |
| <form id="chat-form" class="mx-auto flex max-w-3xl items-end gap-2 px-3 py-3 sm:px-4"> | |
| <label for="chat-input" class="sr-only">Your message</label> | |
| <textarea | |
| id="chat-input" | |
| rows="1" | |
| placeholder="Ask anything..." | |
| class="flex-1 resize-none rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm shadow-sm outline-none transition focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100" | |
| autocomplete="off" | |
| autocapitalize="sentences" | |
| enterkeyhint="send" | |
| ></textarea> | |
| <button | |
| id="send-btn" | |
| type="submit" | |
| class="inline-flex h-11 shrink-0 items-center justify-center rounded-2xl bg-brand-600 px-4 text-sm font-semibold text-white shadow-sm transition hover:bg-brand-700 disabled:opacity-50" | |
| > | |
| <span id="send-label">Send</span> | |
| <svg | |
| id="send-spinner" | |
| class="hidden h-5 w-5 animate-spin" | |
| viewBox="0 0 24 24" | |
| fill="none" | |
| aria-hidden="true" | |
| > | |
| <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" class="opacity-25"></circle> | |
| <path d="M4 12a8 8 0 018-8" stroke="currentColor" stroke-width="3" stroke-linecap="round"></path> | |
| </svg> | |
| </button> | |
| </form> | |
| </footer> | |
| </div> | |
| <div | |
| id="settings-modal" | |
| class="fixed inset-0 z-30 hidden items-end justify-center bg-slate-900/50 p-0 sm:items-center sm:p-4" | |
| aria-hidden="true" | |
| > | |
| <div | |
| class="w-full max-w-lg rounded-t-2xl bg-white p-5 shadow-xl dark:bg-slate-900 sm:rounded-2xl" | |
| role="dialog" | |
| aria-modal="true" | |
| > | |
| <div class="flex items-center justify-between"> | |
| <h2 class="text-base font-semibold">Knowledge base</h2> | |
| <button | |
| id="close-settings" | |
| type="button" | |
| class="rounded-md p-1 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800" | |
| aria-label="Close" | |
| > | |
| ✕ | |
| </button> | |
| </div> | |
| <p class="mt-1 text-xs text-slate-500 dark:text-slate-400"> | |
| Upload .txt/.md/.pdf/.docx/.html files. Files are classified by | |
| filename keyword into product / policy / tech / general collections, | |
| chunked, embedded, and stored in Chroma. | |
| </p> | |
| <form id="upload-form" class="mt-4 space-y-3"> | |
| <input | |
| id="file-input" | |
| type="file" | |
| multiple | |
| class="block w-full text-sm file:mr-3 file:rounded-lg file:border-0 file:bg-brand-600 file:px-3 file:py-2 file:text-white hover:file:bg-brand-700" | |
| /> | |
| <div class="flex flex-wrap gap-2"> | |
| <button | |
| type="submit" | |
| class="rounded-lg bg-brand-600 px-3 py-2 text-sm font-medium text-white hover:bg-brand-700" | |
| > | |
| Upload & re-index | |
| </button> | |
| <button | |
| id="reindex-btn" | |
| type="button" | |
| class="rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:hover:bg-slate-800" | |
| > | |
| Re-index existing docs | |
| </button> | |
| </div> | |
| <div | |
| id="upload-status" | |
| class="min-h-[1.25rem] text-xs text-slate-500 dark:text-slate-400" | |
| ></div> | |
| </form> | |
| </div> | |
| </div> | |
| <template id="tpl-user-msg"> | |
| <div class="flex justify-end"> | |
| <div class="max-w-[85%] rounded-2xl rounded-br-md bg-brand-600 px-4 py-2.5 text-sm text-white shadow-sm"></div> | |
| </div> | |
| </template> | |
| <template id="tpl-bot-msg"> | |
| <div class="space-y-2"> | |
| <div class="flex items-start gap-2"> | |
| <div class="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-brand-500 to-brand-700 text-[11px] font-semibold text-white"> | |
| AI | |
| </div> | |
| <div class="min-w-0 flex-1 space-y-2"> | |
| <div class="agent-badges flex flex-wrap gap-1.5"></div> | |
| <div class="answer prose prose-sm max-w-none rounded-2xl rounded-tl-md border border-slate-200 bg-white px-4 py-3 text-sm leading-relaxed shadow-sm dark:prose-invert dark:border-slate-800 dark:bg-slate-900"></div> | |
| <details class="group rounded-xl border border-slate-200 bg-white/60 px-3 py-2 text-xs dark:border-slate-800 dark:bg-slate-900/60"> | |
| <summary class="cursor-pointer select-none font-medium text-slate-700 dark:text-slate-200"> | |
| Planner / Agent Trace | |
| </summary> | |
| <pre class="trace mt-2 whitespace-pre-wrap break-words text-slate-600 dark:text-slate-300"></pre> | |
| </details> | |
| <details class="group rounded-xl border border-slate-200 bg-white/60 px-3 py-2 text-xs dark:border-slate-800 dark:bg-slate-900/60"> | |
| <summary class="cursor-pointer select-none font-medium text-slate-700 dark:text-slate-200"> | |
| Specialist Outputs | |
| </summary> | |
| <div class="specialists mt-2 space-y-3"></div> | |
| </details> | |
| </div> | |
| </div> | |
| </div> | |
| </template> | |
| <template id="tpl-typing"> | |
| <div class="flex items-start gap-2"> | |
| <div class="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-brand-500 to-brand-700 text-[11px] font-semibold text-white"> | |
| AI | |
| </div> | |
| <div class="rounded-2xl rounded-tl-md border border-slate-200 bg-white px-4 py-3 text-sm shadow-sm dark:border-slate-800 dark:bg-slate-900"> | |
| <span class="typing-dots inline-flex gap-1" aria-label="Thinking"> | |
| <span class="h-1.5 w-1.5 animate-bounce rounded-full bg-slate-400"></span> | |
| <span class="h-1.5 w-1.5 animate-bounce rounded-full bg-slate-400" style="animation-delay: 120ms"></span> | |
| <span class="h-1.5 w-1.5 animate-bounce rounded-full bg-slate-400" style="animation-delay: 240ms"></span> | |
| </span> | |
| </div> | |
| </div> | |
| </template> | |
| <script src="/assets/app.js"></script> | |
| </body> | |
| </html> | |